
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>writing</title>
    <link rel="stylesheet" href=".css/iconfont.css">
    <link rel="stylesheet" href="2.css/iconfont.css">
    <style>
        div{
            margin: 0 auto;
            width:600px;
            height:360px;
            border:3px solid #c0daee;
            border-radius: 5px;
            /* background:tan; */
            
        }
        a{
            text-decoration: none;
            color: #595a5a;
        }
        span{
            display: inline-block;
        }
        .top-box{
            display: flex;
            justify-content: space-between;
            height: 60px;
            width: 600px;
            /* background: chocolate; */
        }
        .logo-font{
            display:flex;
            height: 60px;
            width: 300px;
        } 
        .logo{
            padding-left: 20px;
            padding-top: 15px;
        }
        .come{
            font-size:20px;
            padding-top: 15px;
            padding-left: 5px;
            
        }
        .my-photo{
            padding-left: 20px;
            padding-top: 15px;
            padding-right: 20px;
        }
        .nav{
            border-radius: 6px;
            background-color:#f7fdff;
            width:500px;
            display: flex;
            margin: 0 auto;
            
        }
        a.nav-mas{
            
            padding-left:40px;

        }
        .nothing{
            display: flex;
            /* background-color: darkgray; */
            width:600px;
            height: 45px;


        }
        .get-email-box{
            display: flex;
            justify-content: space-between;
            width: 550px;
            height: 22px;
            
            /* background-color: darkslateblue; */
            margin: 0 auto;
        }
        
        .email{
            display: flex;
            justify-content: space-between;
            width: 600px;
            height: 142px;
            /* background-color: forestgreen; */
        }
        .left-box{
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            width: 90px;
            height: 142px;
            /* background-color: hotpink; */
        }
        .button-1{
            
            margin: 0 auto;
            background-color:#bef6ff;
            width: 43px;
            height: 25px;
        }
        .button-2{
            
            margin: 0 auto;
            background-color: #e6f9fc;
            width: 43px;
            height: 25px;
        }
        .mid-box{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 450px;
            height: 142px;
            /* background-color:indigo */
        }
        
        .massage{
            display: flex;
            
            justify-content: space-between;
            box-shadow: 5px 5px 5px grey;
            border-radius:6px;
            width: 450px;
            height: 40px;
            background-image: url(gradient.png);
            background: linear-gradient(to right,#e8fafc,white);
        }
        .left {
            display: flex;
            justify-content: center;
            width:140px;
            height: 40px;
            /* background-color: chartreuse; */
        }
        .date {
            width:180px;
            height: 40px;
            /* background-color: rgb(137, 164, 110); */
            line-height: 40px;
            text-align:center
        }
        .choose {
            display: flex;
            justify-content:space-between   ;
            width:120px;
            height: 40px;
            
        }
        a.choose-1
        {
            font-size: 15px;
            line-height: 40px;
            align-items: center;
        } 
        a.choose-2
        {
            font-size: 15px;
            line-height: 40px;
            align-items: center;
        } 

        .suo-lue {
            align-self: center;
            font-size: 13px;
            color: #c0c9cb;
        }
        .photo-1 {
            padding-left: 15px;
        }
        .right-box{
            width: 50px;
            height: 142px;
            /* background-color:lightblue */
        }
        .bottom{
            width:600px;
            height: 25px;
            background-image: url(bottom.png);
        }
        .right{
            width: 50px;
            height: 120px;
            /* background-color:#f6fdfd; */
        }
        .write {
            border-radius:6px;
            width: 30px;
            height: 15px;
            background-color:#36bfc8;
            font-size: 10px;
        }


        
    </style>
</head>
<body>
    <div>
        <span class="top-box">
            <span class="logo-font">
                <span class="logo">
                <img src="logo.png" alt="logo">
                </span>
                <span class="come">
                    欢迎回来
                </span>
            
            </span>
            <span class="my-photo">
                <img src="my-photo.png" alt="photo-1">
            </span>
            
        </span>
        <span class="nav">
            <ul>
                <a href="#" class="nav-mas">今日</a>
                <a href="#" class="nav-mas">讯息</a>
                <a href="#" class="nav-mas">服务</a>
                <a href="#" class="nav-mas">校园</a>
                <a href="#" class="nav-mas">我的</a>
            </ul>
        </span>
        <span class="nothing">
            
        </span>
        <span class="get-email-box">
            <span class="title"><strong>邮箱动态-收件箱</strong></span>
            <span class="icon">
                <span class="iconfont">&#xe610;</span>
                <span class="iconfont">&#xeafb;</span>
            </span>
            
        </span>
        <span class="email">
            <span class="left-box">
                <span class="button-1">
                    <span class="icon">
                        <span class="iconfont">&#xf02a8;</span>
                        <img src="black-box.png" >
                    </span>
                    
                </span>
                <span class="button-2">
                    <span class="icon">
                        <span class="iconfont">&#xe659;</span>
                        <img src="black-box.png">
                    </span>
                
                </span>
            </span>
            <span class="mid-box">
                <span class="massage">
                    <span class="left">
                        <img src="photo-1.png" alt="photo-1">
                        <span class="suo-lue">
                            邮件缩略信息
                        </span>
                    </span>
                    <span class="date">2024.2.20</span>
                    <span class="choose">
                        <a href="#" class="choose-1">删除</a>
                        <a href="#" class="choose-2">回复</a>
                    </span>
                    
                    
                </span>
                <span class="massage">
                    <span class="left">
                        <img src="photo-2.png" alt="photo-1">
                        <span class="suo-lue">
                            邮件缩略信息
                        </span>
                    </span>
                    <span class="date">2024.2.20</span>
                    <span class="choose">
                        <a href="#" class="choose-1">删除</a>
                        <a href="#" class="choose-2">回复</a>
                    </span>
                
                </span>
                <span class="massage">
                    <span class="left">
                        <img src="photo-3.png" alt="photo-1">
                        <span class="suo-lue">
                            邮件缩略信息
                        </span>
                    </span>
                    <span class="date">2024.2.20</span>
                    <span class="choose">
                        <a href="#" class="choose-1">删除</a>
                        <a href="#" class="choose-2">回复</a>
                    </span>
                </span>
            </span>
            

            <span class="right-box">
                <span class="right"></span>
                <span class="write">去写信</span>
            </span>
            
        </span>
        <span  class="bottom">
        
        </span>
    </div>
    
</body>
</html>